<template>
  <div class="mr-2 ml-2 mt-2 mb-2">
    <van-swipe :autoplay="3000" lazy-render style="height: 20%">
      <van-swipe-item v-for="image in homeIndexComponentsStore.images" :key="image.url" style="height: 20%"
        @click="image.action">
        <div style="position: relative">
          <img :src="image.url" class="rounded" style="width: 100%; height: 20%" />
          <div class="absolute inset-0 bg-black opacity-50"></div>
        </div>
        <p v-text="image.text"
          class="text-slate-200 fixed top-32 text-lg overflow-hidden text-ellipsis whitespace-nowrap w-screen text-left pl-2 font-bold" />
        <p v-text="image.context.substring(0, 20).toString() + '...'"
          class="text-slate-300 fixed top-40 text-sm w-screen text-left pl-2 pr-2 overflow-hidden text-ellipsis whitespace-nowrap font-bold" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="-mt-3">
    <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 10px' }">
      <p class="text-sm text-center text-slate-500">为您提供更专业的职业测评</p>
    </van-divider>
    <div class="-mt-1">
      <div class="p-2 ml-2 mr-2">
        <van-row :gutter="[10, 10]">
          <van-col span="12" v-for="image in homeIndexComponentsStore.images" @click="image.action">
            <div class="border border-blue-black shadow-lg rounded-base bg-slate-200">
              <div style="position: relative">
                <img :src="image.url" style="width: 100%; height: 20%" class="rounded" />
                <div class="absolute inset-0 bg-black opacity-50 flex items-center justify-center">
                  <p v-text="image.text" class="text-lg text-white font-bold" />
                </div>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const homeIndexComponentsStore = useHomeIndexComponentsStore();
onBeforeMount(() => {
  homeIndexComponentsStore.initDefault();
});
</script>

<style scoped></style>
